<route lang="yaml">
meta:
layout: false
</route>

<template>
  <div class="app-cantainer">
    <div class="filter-container">
      <el-input class="filter-item"
      @keydown="searchKeyup"
      @keyup="searchKeyup"
      clearable v-model="filterObj.search"
                placeholder="标签名"/>
      <el-button class="filter-item" type="primary">搜索</el-button>
      <el-button class="filter-item" type="primary">折叠/展开</el-button>
    </div>
    <div class="main">
      <el-tree :data="labels"
      :props="defaultProps"
       @node-click="handleNodeClick"      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <svg-icon v-if="data.type === 0" name="folder"/>
            <svg-icon v-if="data.type === 1" name="bill"/>
            <svg-icon v-if="data.type === 2" name="link"/>
            <!-- <svg-icon v-if="data.type === 3"/> -->
            <span v-if="data.color" :style="{color: data.color}">{{ node.label }}</span>
            <span v-else>{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script setup>

import data from '../assets/data/data.json'

const labels = ref(data)

const defaultProps = {
  children: 'children',
  label: 'title',
  class: 'custom-node-item'
}

// 菜单点击
const handleNodeClick = (data) => {
  console.log(data)
  const {type, url} = data;
  if (type === 0 || type === 3) {
    return;
  }
  window.open(url, '_blank')
}

// 过滤对象
const filterObj = reactive({
  search: ''
})

// 搜索
const searchKeyup = (evt) => {
  const {search} = filterObj
  if (!search) {
    labels.value = data
    return;
  }
  const searchResults = searchByTitle(data, search);
  labels.value = searchResults
  console.log(search)
  console.log(searchResults)
}

function searchByTitle(data, targetTitle) {
  return data.filter(node => {
    if (node.title.trim().includes(targetTitle.trim())) {
      return true;
    } else if (node.children) {
      node.children = searchByTitle(node.children, targetTitle);
      return node.children.length > 0;
    }
    return false;
  });
}
</script>


<style scoped lang="scss">

.app-cantainer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: whitesmoke;
}

.filter-container {
  margin: 10px 0 0 10px;
  .filter-item {
    margin-right: 10px;
  }
}

.main {
  margin-top: 20px;
}


::v-deep .el-input {
  width: 200px;
}

::v-deep .custom-node-item {
  margin: 5px 0;
}

::v-deep .el-tree {
  background-color: whitesmoke;
}
.custom-tree-node {
  i {
    font-size: 17px;
    vertical-align: middle;
  }

  span {
    font-size: 17px;
    vertical-align: middle;
  }
}
</style>
